<template>
    <div>
        <!-- 顶部导航组件 -->
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="$router.push('/home')">
            <template #right>
                <!-- 气泡弹出框组件 -->
                <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="bottom-end">
                    <template #reference>
                        <!-- <van-button type="primary">浅色风格</van-button> -->
                        <van-icon name="ellipsis" class="more" />
                    </template>
                </van-popover>
            </template>
        </van-nav-bar>
        <!-- 分享面板组件 -->
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelectShare" lock-scroll />
        <!-- 轮播图组件以及商品信息  -->
        <goodsSwiperCom></goodsSwiperCom>
    </div>
</template>

<script setup lang="ts">
import {Toast} from 'vant' 
// 引入轮播图组件
import goodsSwiperCom from '@/components/detials/goodsSwiperCom.vue'
import { ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
const Router = useRouter()
// 分享面板
// 定义分享面板双向绑定的属性，用来控制显示隐藏
let showShare = ref(false)
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

const onSelectShare = (option:{name:string,icon:string}) => {
    Toast(option.name);
    showShare.value = false;
};
// 气泡弹出层
// 定义是否显示气泡弹出层
const showPopover = ref(false);
// 通过 actions 属性来定义菜单选项
const actions = [
    { text: '首页', icon: 'home-o' },
    { text: '购物车', icon: 'shopping-cart-o' },
    { text: '分享', icon: 'share-o' },
];
const onSelect = (action: { text: string, icon: string }) => {
    // Toast(action.text)
    if (action.text == '首页') {
        Router.push('/home')
    }
    if (action.text == '购物车') {
        Router.push('/cart')
    }
    if (action.text == '分享') {
        showShare.value = true
    }

};


</script>
<style scoped lang="scss">
.more {
    font-size: 25px;
    color: #df041a;
}
</style>